

        body{
            background: #efefef;
        }
        .tp{
            background: #fff;
            font-size: 28px;
            text-align: center;
            flex-wrap: wrap;
        }
        .tp .item{
            white-space: nowrap;
            width: 50%;
            height: 72px;
            position: relative;
        }
        .tp .item:first-child{
            background: #000;
            color: #fff;
        }
        .tp .item p:first-child {
            font-weight: bolder;
            font-size: 15px;
        }
        main{
            padding: 35px 20px;
        }
        .filter{
            width: 20px;
            position: absolute;
            top: 80px;
            right: 15px;
            z-index: 5;
            overflow: initial !important;
        }
        .filter .opt{
            pointer-events: none;
            opacity: 0;
            width: 85px;
            right: 28px;
            background: #fff;
            border-radius: 6px;
            font-size: 13px;
            text-align: center;
            color: #101010;
            line-height: 2.4;
            transition: .5s;
        }
        .filter.active .opt{
            pointer-events: initial;
            opacity: 1;
        }
        .filter .opt p{
            position: relative;
        }
        .filter .opt p.active{
            color: red;
        }
        .filter .opt p:nth-child(n + 2)::before{
            content: '';
            position: absolute;
            width: 80%;
            background: #ededed;
            left: 50%;
            top: 0px;
            transform: translateX(-50%);
            height: 1px;
        }
        .list{
            margin-left: -15px;
            flex-wrap:wrap;
        }
        .list .item{
            width: calc(50% - 15px);
            margin-left: 15px;
            font-size: 12px;
            font-weight: bold;
        }
        .list .item:nth-child(n + 3){
            margin-top: 15px;
        }
        .list .item .mid{
            position: relative;
            line-height: .7;
            background: radial-gradient(circle,hsla(0,0%,75.7%,.9),rgba(46,46,46,.9));
        }
        .list .item .mid::before{
            content: '';
            display: block;
            padding-bottom: 68%;
        }
        .list .item .mid img{
            width: 100%;
            height: 100%;
        }
        .list .item .mid .id{
            color: #fff;
            position: absolute;
            top: 10px;
            left: 10px;
        }
        .list .item .mid .dateSpeed{
            position: absolute;
            width: 100%;
            bottom: 10px;
            padding: 0px 10px;
            left: 0px;
            justify-content: space-between;
            color: orange;
        }
        .list .item .mid .dateSpeed .speed{
            color: rgb(114, 207, 243);
        }
        .list .item .name{
            font-size:13px;
            font-weight: normal;
        }
        .list .item .price{
            justify-content: space-between;
        }
        .list .item .price .bf::before{
            content: '¥';
        }
        .list .item .price .compare{
            color: green;
        }
        .list .item .price .compare::before{
            content: '↑';
            font-size: 15px;
        }
        .list .item .price .compare.down{
            color: red;
        }
        .list .item .price .compare.down::before{
            content: '↓';
        }
        .list .item .price.now{
            color: rgb(75, 105, 255);
        }
        